<script setup lang="ts">
import myUser from "@/composables/myUser.ts";
import dayjs from "dayjs";
const {users,getUsers,switchFreeze,delUser}  = myUser();
const route = useRoute();
await getUsers({page:route.query.page || 1});
const columns = [
  {id:'id',label:'ID',width:50},
  {id:'avatar',label:'头像',type:'image'},
  {id:'name',label:'用户名'},
  {id:'email',label:'邮箱',type:'substr'},
  {id:'phone',label:'手机'},
  {id:'created_at',label:'创建时间',type:'date'},
  {id:'',label:'操作',type:'buttons'},
]
</script>

<template>
<main class="users" v-if="users">
<el-card  shadow="never">
  <template #header>
    用户列表
  </template>
  <el-table :data="users.data" border stripe style="width: 100%" table-layout="fixed" >
    <el-table-column align="center"
        v-for="col in columns"
        :prop="col.id"
        :key="col.id"
        :label="col.label"
        :width="col.width"
        #default="{row}"
    >
      <template v-if="col.type == 'image'">
        <el-avatar shape="square" :size="80" fit="scale-down" :src="row[col.id]" />
      </template>
      <template v-if="col.type == 'substr'">
       <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{row[col.id]}}</span>
      </template>
      <template v-if="col.type == 'date'">
        <span>{{dayjs(row[col.id]).format('YYYY-MM-DD')}}</span>
      </template>
      <template v-if="col.type == 'buttons'">
        <el-button-group size="small" v-if="row['id'] != 1">
          <el-button type="primary" @click="$router.push({name:'admin.user.detail',params:{u_id:row['id']}})"><icon-doc-detail /></el-button>
          <el-button type="warning" v-if="row['is_freeze'] == 'no'" @click="switchFreeze(row['id'],'no')"><icon-lock /></el-button>
          <el-button type="success" v-else @click="switchFreeze(row['id'],'yes')"><icon-unlock /></el-button>
          <el-button type="danger" @click="delUser(row['id'])">
            <icon-delete />
          </el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>
</el-card>
  <my-pagination
      :per_page='users.meta.per_page'
      :total='users.meta.total'
      @currentChange="$router.push({ name: 'user.index',params:{u_id:$route.params?.u_id}, query: { page: $event } })"
  />
</main>
</template>

<style lang="scss" scoped>

</style>